<template>
  <div class="bottom_chart_boxes" ref="touzi"></div>
</template>
  
<script>
import * as echarts from 'echarts'
export default {
  props: ['data', 'enterpriseNumber','registeredFunds'],
  methods:{
    initTouZiChart() {
      const myBottomChartDom = this.$refs.touzi
      const myBottomChart = echarts.init(myBottomChartDom)
      let option = {
        title: [
          {
            text: '投资企业类别',
            left: '25%',
            top: '10%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 15,
            },
          },
          {
            text: '单位:家',
            right: '10%',
            top: '10%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 14,
              fontWeight: 'normal',
            },
          },
          // {
          //   text: `${this.$props.registeredFunds}{sub|亿}`,
          //   left: '14%',
          //   top: '55%',
          //   textStyle: {
          //     color: 'red',
          //     fontSize: 26,
          //     fontWeight:900,
          //     rich:{
          //       sub:{
          //         fontSize:14,
          //         fontWeight:900,
          //       }
          //     },
          //   },
          //   itemGap:5,
          //   textAlign:'center',
          //   subtext:'注册资本',
          //   subtextStyle:{
          //     fontSize:20,
          //     fontWeight:900,
          //     color:'#000',
          //   }
          // },
          {
            text: `${this.$props.enterpriseNumber}{sub|家}`,
            left: '14%',
            top: '35%',
            textStyle: {
              color: 'red',
              fontSize: 26,
              fontWeight:900,
              rich:{
                sub:{
                  fontSize:14,
                  fontWeight:900,
                }
              },
            },
            textAlign:'center',
            itemGap:5,
            subtext:'投资企业',
            subtextStyle:{
              fontSize:18,
              fontWeight:900,
              color:'#000',
            }
          },
        ],
        grid: {
          left: '30%',
          right: '10%',
          top: '30%',
          bottom: '5%',
          containLabel: true
        },
        backgroundColor: 'rgb(235, 246, 253)',
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          data: this.$props.data.map(item=>item.name),
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            color: 'black',
            margin: 10, //刻度标签与轴线之间的距离。
            interval: 0,
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgb(212,234,239)',
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: 'black',
            formatter: function (value) {
              return value;
            }
          }
        },
        series: [{
          type: 'pictorialBar',
          symbolSize: [15, 7.5],
          symbolOffset: [0, -3.75],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            color: 'rgb(86,224,225)',
          },
          data: this.$props.data.map(item=>parseInt(item.value.split('/')[0])),
        }, {
          type: 'pictorialBar',
          symbolSize: [15, 7.5],
          symbolOffset: [0, 3.75],
          z: 12,
          itemStyle: {
            color: 'rgb(126,154,227)',
          },
          data: this.$props.data.map(item=>parseInt(item.value.split('/')[0])),
        }, {
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgba(161,180,224,.8)' }, { offset: 1, color: 'rgba(70,177,252,.8)' }])
          },
          barWidth: 15,
          data: this.$props.data.map(item=>parseInt(item.value.split('/')[0])),
          label: {
            show: true,
            position: 'top',
            formatter: (params)=>{
              // return `${params.value}/${Math.round(params.value/this.$props.enterpriseNumber*100)+'%'}`
              return this.$props.data[params.dataIndex].value
            }, // 显示柱状图数据
            fontSize: 12,
            color: 'rgb(39,96,152)',
          },
        }]
      };
      myBottomChart.setOption(option)
    },
  },
  mounted(){
    this.initTouZiChart()
  }
}
</script>
  
<style scoped></style>